<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" style="margin: 20px 0 0 20px; border-radius: 10px;" @click="addAreaList">添加区域</el-button>
      <el-table :data="list" style="width: 100%; margin-top: 20px;">
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column align="center" prop="areaName" label="区域名称" />
        <el-table-column align="center" prop="spaceNumber" label="车位数 (个)" width="100" />
        <el-table-column align="center" prop="areaProportion" label="面积 (㎡)" width="100" />
        <el-table-column align="center" prop="ruleName" label="计费规则" />
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column align="center" label="操作" width="180">
          <template #default="{row}">
            <el-button type="text" size="mini" @click="editArea(row.id)">编辑</el-button>
            <el-button type="text" size="mini" @click="delArea(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @current-change="changePage"
          @size-change="changePageSize"
        />
      </el-row>
    </div>
    <el-dialog :title="showTitle" :visible.sync="showDialong" @close="btnCancel">
      <el-form ref="form" :rules="formrule" :model="form" label-width="120px">
        <el-form-item style="width: 80%;" label="区域名称" required prop="areaName">
          <el-input v-model="form.areaName" placeholder="请输入区域名称" />
        </el-form-item>
        <el-form-item style="width: 80%;" label="车位数（个）" required prop="spaceNumber">
          <el-input v-model="form.spaceNumber" placeholder="请输入车位个数" />
        </el-form-item>
        <el-form-item style="width: 80%;" label="面积（㎡）" required prop="areaProportion">
          <el-input v-model="form.areaProportion" placeholder="请输入面积" />
        </el-form-item>
        <el-form-item label="关联计费规则" required prop="ruleId" style="width: 80%;">
          <el-select v-model="form.ruleId" placeholder="请选择" prop="areaName">
            <el-option label="分段计费" :value="4" />
            <el-option label="按次计费" :value="3" />
            <el-option label="按小时计费" :value="2" />
            <el-option label="按分钟计费" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="width: 80%;" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnOK">确定</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addAreaAPI, deleteAreaAPI, getAreaAPI, getAreaListAPI } from '@/api'

export default {
  name: 'Area',
  data() {
    return {
      form: {
        areaName: '',
        spaceNumber: null,
        areaProportion: null,
        ruleId: null,
        remark: ''
      },
      formrule: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位个数', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        ruleId: [
          { required: true, message: '请选择计费规则', trigger: 'change' }
        ]
      },
      showDialong: false,
      pageParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      list: []
    }
  },
  computed: {
    showTitle() {
      return this.showDialong.id ? '编辑区域' : '添加区域'
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    // 页码改变时触发的事件
    changePage(newPage) {
      this.pageParams.page = newPage
      this.getAreaList()
    },
    // 每页显示条数改变时触发的事件
    changePageSize(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getAreaList()
    },
    async getAreaList() {
      // 调用接口获取区域列表数据
      const { total, rows } = await getAreaListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
    },
    addAreaList() {
      this.showDialong = true
    },
    async btnOK() {
      this.$refs.form.validate()
      await addAreaAPI(this.form)
      this.$message.success('添加成功')
      this.getAreaList()
      this.showDialong = false
    },
    btnCancel() {
      this.$refs.form.resetFields()
      this.showDialong = false
      this.form = {
        areaName: '',
        spaceNumber: null,
        areaProportion: null,
        ruleId: null,
        remark: ''
      }
    },
    async delArea(id) {
      await this.$confirm('是否删除')
      await deleteAreaAPI(id)
      this.$message.success('删除成功')
      this.getAreaList()
    },
    async editArea() {
      this.showDialong = true
      const res = await getAreaAPI()
      console.log(res)
    }
  }
}
</script>
